<template>
 <a href="login.html"><span class="zhuceImg"><img src="img/left.jpg"></span></a>
  <!-- 写内容 -->
  <div class="logonMid">
      <div><input class="txt" type="text" placeholder="请输入用户名"  maxlength="10"><span></span></div>
      <div><input class="pwd" type="password" placeholder="请设置密码" maxlength="18"></div>
      <div><input class="pwd" type="password" placeholder="请再次确认密码" maxlength="18"></div>
      <div><input class="phome"  type="tel" placeholder="联系手机" maxlength="11"></div>
    <div class="btn" @touchstart="logon()">注册</div>
  </div>
</template>

<script>
export default {
  methods:{
    //点击判断注册的正则
    logon:function() {
      var $pwd = $(".pwd");
      var $txt = $(".txt");
      var $phome = $(".phome");
      var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%+_]"); 
      if(pattern.test($txt.val())){
          alert("用户名不能含有特殊字符");
          $txt.focus();
          return;
      }else if ($txt.val().trim()=="") {
        alert("用户名不能为空");
        $txt.focus();
        return;
      }else if ($txt.val().length<6) {
        alert("用户名长度不能少于6个字符");
        $txt.focus();
        return;
      } 
      else if ($pwd.eq(0).val()=="" && $pwd.eq(1).val()=="") {
        alert("密码不能为空");
         $pwd.eq(1).focus();
        return;
      }else if ($pwd.eq(0).val().length<6) {
        alert("密码长度不能少于6个字符");
         $pwd.eq(0).focus();
        return;
      }else if ($pwd.eq(0).val()!=$pwd.eq(1).val()) {
        alert("密码不一致");
        $pwd.eq(0).focus();
        return;
      }else if (!(/^1[34578]\d{9}$/.test($phome.val()))){
           alert("你输入的手机号码不正确");
         $phome.focus();
      }
      else if ($phome.val().trim()==""){
          alert("联系手机不能为空");
         $phome.focus();
      }else{
            $.ajax({
          type:"GET",
          url: "http://localhost/login/login.php",
          data:{type:"Logon",name:$txt.val(),pwd:$pwd.eq(0).val(),phome:$phome.val()},
          dataType:"jsonp",
          jsonp:"cb",
          success:function(data){
            if (data.error==0) {
              alert('注册成功！');
              location.href="/login.html";
            }else if(data.error==1){
              alert("用户名已存在!");
            }else{
              alert("手机号已被注册!");
            }
          }
        })
      }
    },

  }
}
</script>
<style scoped>
  .zhuceImg{
    display: inline-block;
    position: fixed;
    top: 1.5%;
    width: 5%;
    left: 2%;
    z-index:1888;
  }
  .zhuceImg img{
    width:100%;
  }
  /*注册部分*/
  .logonMid{
    width: 100%
  }
  .logonMid div{
    width: 85%;
    margin: 0.2rem auto;
    height: 0.4rem;
    line-height:0.4rem;
    border:1px solid #dbdbdb;
    border-radius: 5px; 
  }
  /*输入框*/
  .logonMid div input{
      width: 90%;
      outline:none;
      border:none;
      margin-left:1em;
  }
  /*注册按钮*/
  .logonMid .btn{
    margin-top: 80px;
    background-color: #f29004;
    text-align: center;
    color: white;
    font-size: 12px;
  }
</style>
